/* __V3D_TEMPLATE__ - template-based file; delete this line to prevent this file from being updated */

body {
 margin: 0px;
 overflow: hidden;
 background-color:#000;
}


.back-menu img {
 width:60px;
 opacity:.2;
 transition: all 1s ease 0s;
 position:fixed;
 right:0;
 bottom:10px;
}

.back-menu img:hover {
 opacity:1;
}

:root { 
	--base-font-size: 10px;  
	--fluid-typography-ratio: 0.9;	
	--rem: calc(var(--base-font-size) + var(--fluid-typography-ratio) * 1vw); 
	font-size: var(--rem);
}

.v3d-container {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
background: rgb(0,189,183);
background: radial-gradient(circle, rgba(0,189,183,1) 0%, rgba(0,0,0,1) 100%);
}


.fullscreen-button {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 50px;
    height: 50px;
    cursor: pointer;
    background-size: 100% 100%;
    display: none;
    z-index: 1;
}

.fullscreen-open {
    background-image: url('media/fullscreen_open.svg');
}

.fullscreen-close {
    background-image: url('media/fullscreen_close.svg');
}

.v3d-simple-preloader-bar {
    background-color: #666160 !important;
    border-color: #666160 !important;
}

.v3d-simple-preloader-logo {
	background-image: url(media/bp-logo.svg) !important;
}

/* removes tap blinking on ios devices */
* { -webkit-tap-highlight-color:rgba(0,0,0,0); }

h1, h2 { text-transform:uppercase; font-weight:lighter;}

h1 {font-size:5em !important;}

.box {
    font-family: 'Roboto', sans-serif;
  color:white;
  font-weight: bold;
     border: 1px solid gray;
     padding: 50px;
     transition: all 1s ease 0s;
     background-color:rgba(0,0,0,.4);
     text-align: center;
     }

.box h2 {
 font-size: calc(14px + 0.9vw);
         background-color:firebrick;
         margin:-50px -50px 20px -80px;
         padding:15px;
  clip-path: polygon(
    0 50%,
    5% 0,
    100% 0%,
    100% 100%,
    0% 100%,
  5% 100%
  )
        }

.box .btn-close {z-index:1;}

p {font-weight:lighter;  }

.btn-close {
  position:absolute;
  right:15px;
  top:15px;
}


a {color: white; text-transform:uppercase; text-decoration:none;}

a:hover {text-decoration:underline;}

ol {

font-size:20px;

margin: 0;

padding: 0;
}

li {list-style-type:circle;}


ol li {
  list-style-type: none;
  counter-increment: item;
  border-top: 1px solid white;
  margin: 0px 0px 0px 0px;
  padding:25px 0 25px;
  background-color: rgba(255, 0, 0, 0);
  transition: background-color 1s ease 0s;
}

ol li:before {
  content: counter(item);
  font-size: 80%;
  background-color: #000;
  color: #fff;
  font-weight: bold;
  padding: 3px 8px;
  margin-left:15px;
  border-radius: 3px;
}

ol li:hover {
  cursor: pointer;
background-color: firebrick !important;
}

.text-light {
 position:unset;
 z-index: 0;
 max-width:500px;
 top: 10%;
 }

ol.mob li {
 display: inline-grid;
 width:10%;
 padding:0;
 border:none;
 text-align:center;
 background-color: #333 !important;
}

ol.mob li:hover {
  background-color: firebrick !important;
}

ol.mob li:before {
 display:none;
}

ol.mob {
 width:800px;
 }

@media only screen and (max-width: 600px) {
  
.box {  
 position: fixed;
     }  

 
.text-light {
  margin:0 auto;
  top: 0;
}
  
.box-main > div {
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, .5);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(0px);
  padding: 30px;
}
 
ol.tab{display:none;}
ol.mob {display: block;}
 
canvas {
 margin-top:0px; 
       }
  
h3 {margin: 0;
    text-align-last: auto;
    text-transform: uppercase;
    display:block;
   }
  
}

@media only screen and (min-width: 600px) {
 ol.tab{display:none;}
ol.mob {display: block;}
.box { 
    margin-top:-20%;
   position:absolute;
  width:280px;
   right:0;
 bottom:0;
     }

 .text-light {
  margin:0 auto;
}
 
.text-light.box-main > div {
 background: rgba(126, 126, 126, .44);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  padding: 30px;
}
  
  h3 {margin: -6px 0 7px 53px;text-align-last: end;text-transform: uppercase;}
 
  
}

@media only screen and (min-width: 768px) {
 ol.tab{display:block;}
ol.mob {display: none;}
 
 .box {  
   margin-top:50%;
   position:absolute;
  width:260px;
   right:0;
     }  

 .text-light {
  margin:initial;
}
 
.box-main > div {
 position:fixed;
 width:320px;
 height:100%;
}
 
  h2.text-danger {
  font-weight: 700;
  margin: -65px 0 0;
  text-align: end;
  font-size: 3em;
}
  
}


@media only screen and (min-width: 992px) {

  .box {  
   margin-top:35%;
   position:absolute;
  width:350px;
   right:0;
     }  

.box-main > div {
  position:absolute;
 width:400px;
}
 
h3 {margin: 0;
    text-align-last: auto;
    text-transform: uppercase;
    display:block;
   }
  
  h2.text-danger {
  margin: -116px 0 0 23px;
  font-size: 3em;
}

}


@media only screen and (min-width: 1200px) {

  .box {
 position:absolute;
 right:0px;
 top:0px;
 margin-top:10%;
 width:500px;
 height:450px;
   }  

 
 .box-main > div {
  position:absolute;
 width:500px;
  height:initial;
}

 
 .text-light {
  width: 500px;
  margin:10% 0 0 2%;
  }
  
h2.text-danger {
  font-size: 4em;
    margin: -116px 0 0 10px;

}
  
}


@media only screen and (min-width: 1600px) {
 .text-light {
  width: 500px;
  margin:10% 0 0 10%;
  }
}


 .box img {
  border-radius:10%; border:3px solid #fff; width:50%;
    }